<template>
  <div>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="68%" @close="close" custom-class="popup">
    <div class="divBox" >
    <div class="selCardList">
      <div class="title"> 视频回放设置</div>
      <el-form :model="tableFrom" ref="searchForm" inline size="small" label-width="85px" >
        <el-form-item label="回放设置：">
          <el-radio-group v-model="tableFrom.status">
            <el-radio :label="3">回放开启</el-radio>
            <el-radio :label="6">关闭回放</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="selCardList">
      <div class="tips" v-show="close">远程同步阿里oss存储上直播回放视频地址到本地，请选择时间（区间为4天）。<div class="close" @click="close=false"><i class="el-icon-close"></i></div></div>
      <div class="title"> 同步条件</div>
      <el-form :model="tableFrom" ref="searchForm" inline size="small" label-width="85px" >
        <el-form-item label="时间范围：">
          <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timechange"
          align="right">
        </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary">拉取直播回放</el-button> 
        </el-form-item>
      </el-form>
    </div>
    <div class="selCardList">
      <div class="title"> 搜索条件</div>
      <el-form :model="tableFrom" ref="searchForm" inline size="small" label-width="85px" >
        <el-form-item label="时间范围：">
          <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="timechange"
          align="right">
        </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary">搜索</el-button> 
        </el-form-item>
      </el-form>
    </div>
    <el-card class="mt14">
      <div class="title" style="padding-left: 0"> 录制文件列表</div>
      <div class="tips" v-show="close2" style="margin-bottom: 10px;">[回放名称][排序]可进行快速修改,双击或者单击进入编辑模式,失去焦点可进行自动保存 排序前后台按倒序排列 <div class="close" @click="close2=false"><i class="el-icon-close"></i></div></div>
      <dTable :table-data="tableData" :table-header-data="tableHeaderData">
        <template #operation="scope">
          <operation :row="scope.row" :col="scope.item" @opertionClick="onErtion" />
        </template>
        <template #state="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-text="上架"
            inactive-text="下架"
          />
        </template>
      </dTable>
      <div class="block">
        <dFooter :show-loading="showLoading" :page-config="pageConfig" @sizeChange="onSizeChange"
        @currentChange="onCurrentChange"></dFooter>
      </div>
    </el-card>
    </div>
  </el-dialog>
  <el-dialog title="直播间号【55658822】的直播回放,回放时间：1741520870 - 1741521770" :visible.sync="previewShow" width="68%" @close="previewShow=false">
    <div class="video-div">  
      <video 
       src="http://congguyunketang.oss-cn-shenzhen.aliyuncs.com/record/testcrmeblive/55658822/2025-03-09-19-48-20_2025-03-09-20-03-20.mp4" controls>
      </video>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="previewShow=false">关 闭</el-button>
    </span>
  </el-dialog>
  <el-dialog title="直播间号【55658822】的直播回放,回放时间：1741520870 - 1741521770" :visible.sync="downloadShow" width="68%" @close="downloadShow=false">
    <div class="download-div">  
      <div class="list">
        <div class="serial">1</div>
        下载视频导出工具
        <el-button size="small" type="primary" style="margin-left: 10px">
          <a href="http://xiaoetong-1252524126.file.myqcloud.com/m3u8-downloader-win-0.1.3 (1).exe">下载</a>
          </el-button> 
      </div>
      <div class="list">
        <div class="serial">2</div>
        完成下载后，复制以下链接至工具视频地址处
      </div>
      <div class="list-input">
        <div class="list-input-div">http://congguyunketang.oss-cn-shenzhen.aliyuncs.com/record/testcrmeblive/55658822/2025-03-09-18-48-20</div>
        <el-button size="small" type="primary" style="margin-left: 10px" @click="oncopy('12465')">复制</el-button> 
      </div>
      <div class="list">
        <div class="serial">3</div>
        在下载的导出工具中，操作步骤如图：
      </div>
      <div class="list-image">
         <img src="../../../../assets/images/img_live_export.png">
         <!-- <img src=""> -->
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="downloadShow=false">关 闭</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
import dFooter from '@/components/dFooter/dFooter.vue'
import dTable from '@/components/dTable/dTable.vue'
import timeOptions from '@/utils/timeOptions';
import editpopUp from './editpopUp.vue'
import operation from '@/components/operation/operation.vue'
import dFrom from '@/components/dFrom/dFrom.vue'
export default {
  components: {
    dTable,
    dFooter,
    editpopUp,
    operation,
    dFrom
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    fromData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      close: true,
      close2:true,
      previewShow:false,
      downloadShow: false,
      pickerOptions: timeOptions,
      pageConfig: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: 10,
        total: 0,
        disabled: false,
        layout: 'total, sizes, prev, pager, next, jumper'
      },
      showLoading: false,
      tableFrom: {
        seckill_status:'',
        keyword:''
      },
      seckillStatusList:[],
      tableData: [],
      tableHeaderData: [
        { prop: 'dataBase', label: '直播间号', columnType: 'text', align: 'left', 'min-width': '249' },
        { prop: 'databasePassword', label: '回放名称', columnType: 'text', align: 'left', 'min-width': '249' },
        { prop: 'databaseUrl', label: '地址', columnType: 'text', align: 'left', 'min-width': '249' },
        { prop: 'databaseUsername', label: '开始时间', columnType: 'text', align: 'left', 'min-width': '249' },
        { prop: 'createTime1', label: '结束时间', columnType: 'text', align: 'left', 'min-width': '249' },
        { prop: 'createTime2', label: '排序', columnType: 'text', align: 'left', 'min-width': '249' },
        { prop: 'state', label: '状态', columnType: 'slot', align: 'left', 'min-width': '249' },
        { prop: 'operation', label: '操作', columnType: 'slot', 'width': '230', fixed: 'right' }
      ],
      operationData:[
        { name: 'preview', label: '预览', icon: 'edit', type: 'primary' },
        { name: 'download', label: '下载', icon: 'edit', type: 'primary' },
        { name: 'playback', label: '回放设置', icon: 'edit', type: 'primary' },
        { name: 'delete', label: '删除', icon: 'edit', type: 'primary' }
      ],
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2:''
    }
  },
  mounted() {
    this.tableData = [{dataBase:'123456',operation:this.operationData}]
  },
  methods: {
    oncopy(data){
      const text = data;
			const textarea = document.createElement('textarea');
			textarea.value = text;
			document.body.appendChild(textarea);
			textarea.select();
			document.execCommand('Copy');
			document.body.removeChild(textarea);
			this.$message({
          message: '复制成功',
          type: 'success'
        });
    },
    timechange(e){
      console.log(e,'---times')
    },
    close() {
      this.$emit('close')
    },
    onSubmitForm2() {
      console.log('表单验证')
    },
    onConfirm() {
      this.editshow = false
      console.log()
    },
    onSizeChange(val) {
      // this.searchFromData.pageSize = val
      // this.fetchData()
    },
    onCurrentChange(val) {
      // this.searchFromData.pageNo = val
      // this.fetchData()
    },
    // 具体日期
    onchangeTime(e) {
      console.log(e)
      // this.tableFrom.timeVal = e;
      // this.tableFrom.timeVal = e ? this.timeVal.join("-") : "";
      // this.getList(1);
    },
    // 重置
    searchReset(){
      // this.tableFrom.date = ""
      this.$refs.searchForm.resetFields()
    },
    onErtion(name, row) {
      console.log('操作插槽事件', name, row)
      switch (name) {
        case 'preview':
          // this.fromData = { ...row }
          this.previewShow = true
          break
        case 'download':
          // this.fromData = { ...row }
          this.downloadShow = true
          break
        case 'playback':
        this.$confirm('设置成功后，没有开启直播将自动播放此回放', '设置为直播间回放', {
              confirmButtonText: '是的,我要设置',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.IfdelGift({ id: row.id })

            })
          break
        case 'delete':
        this.$confirm('是否删除此数据?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.IfdelGift({ id: row.id })

            })
          break
      }
    },
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__body{
  background: #f3f3f4;
}
.selCardList{
  background: #ffffff;
  border-radius: 4px;
  margin-bottom: 15px;
  position: relative;
}
.tips{
    width: 100%;
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
    padding: 0 15px;
    border-radius: 5px;
    height: 45px;
    display: flex;
    align-items: center;
    .close{
      margin-left: auto;
      cursor:pointer;
    }
}
.title{
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
  margin-bottom: 20px;
}
.video-div{
  width: 100%;
  min-height: 300px;
  video{
    width: 100%;
    height: 100%;
  }
}
.download-div{
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 12px;
}
.list{
  height: 33px;
  display: flex;
  align-items: center;
  margin-top: 20px;
  .serial{
    border-radius: 50%;
    width: 33px;
    height: 33px;
    border: 1px solid #eee;
    text-align: center;
    margin-right: 8px;
    line-height: 33px;

  }
}
.list-input{
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding-left: 42px;
  .list-input-div{
    height: 33px;
    line-height: 24px;
    float: left;
    padding: 5px;
    background-color: #eee;
    border-radius: 5px;
    width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.list-image{
  width: 100%;
  min-height: 200px;
  margin-top: 5px;
  img{
    width: 100%;
    height: 100%;
  }
}
</style>
